
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<!-- 引入props-types，用于对组件标签属性进行 -->
		<script type="text/javascript" src="../js/prop-types.js"></script>

	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>
		<div id="demo2"></div>
		<div id="hanshu"></div>

	<script type="text/babel">/* 此处必须写成babel */
		// 创建  类式组件 (必须继承React中的类)
		class Person extends React.Component{
			// 用来限制类的属性类型
			static propTypes = {
				name:PropTypes.string.isRequired,	//name必须为string  
				age:PropTypes.number,
				sex:PropTypes.string.isRequired,	//sex必须为string  
				change:PropTypes.func,	//限制change类型为 function  
			}
			// 用来设置默认值
			static defaultProps = {
				age:888,
				sex:"无"	//name必须为string  
			}
			// 简写把构造器去掉 状态数据拿到外部
			state = {name:"tony",age:18,sex:"男"}
			render(){
				// console.log("reder中的this",this);
				const{name,age,sex} = this.props 
				return (
					<ul>
						<li>{name}</li>
						<li>{age}</li>
						<li>{sex}</li>
					</ul>
				)
			}
			// 使用箭头函数（没有this）有this就直接指向外部 赋值类型方法
			change_name = () =>{
				//注意react中的state不能直接更改要用setState（{ishot:!ishot}） 
				const ishot = this.state.ishot
				this.setState({ishot:!ishot})
				console.log("方法");
			}
		}

		// 创建函数式组件
		function Demo(props){
			const{name,sex} = props 
			// console.log(this);	//此处的this是undefind  因为babel在编译jsx启动了严格模式
			return <h2>测试函数式组件-姓名：{name},性别：{sex}</h2>
		}
		Demo.propTypes = {
			name:PropTypes.string.isRequired,	//name必须为string  
			sex:PropTypes.string,
		}
		
		function change_name1 (){
				//注意react中的state不能直接更改要用setState（{ishot:!ishot}） 
				const ishot = this.state.ishot
				this.setState({ishot:!ishot})
				console.log("方法");
			}
		ReactDOM.render(<Person name="yuge" age={18} sex="男" change={change_name1}/> , document.getElementById("test"))
		ReactDOM.render(<Person name="小红"  sex="女" /> , document.getElementById("demo"))

		const p = {name:"某人", age:99, sex:"无"}
		ReactDOM.render(<Person {...p} /> , document.getElementById("demo2"))

		ReactDOM.render(<Demo name="小房"  sex="不女" /> , document.getElementById("hanshu"))
		</script>
	</body>
	<style>
		.title{
			background-color: aqua;
		}
	</style>

	</html>
